<template>
	<view>
		<movable-area scale-area>
			<movable-view class="pop-box" direction="all" out-of-bounds x="60rpx" y="300rpx">
				<view class="pop-body">
					<view class="pop-title">完成情况说明</view>
					<view class="pop-content">
						<view class="coreshop-flex" v-if="editExplainInfo.jh.ywyidaaaaaa == userData.ID">
							<view :class="['status-list coreshop-flex coreshop-justify-center', planStatusCur=='2'?'active':'']" @click="selectStatus('2')">
								<u-icon
									name="checkmark"  
									color="#fff" 
									size="20" 
									bold="true"
									:custom-style="{width:'39rpx',height:'39rpx',marginRight:'7rpx',background:'#1ed259',borderRadius:'50%'}">
								</u-icon>
								<view>已完成</view>
							</view>
							<view :class="['status-list coreshop-flex coreshop-justify-center', planStatusCur=='1'?'active':'']" @click="selectStatus('1')">
								<u-icon
									name="more-dot-fill"  
									color="#fff" 
									size="20" 
									:custom-style="{width:'39rpx',height:'39rpx',marginRight:'7rpx',background:'#ff8a00',borderRadius:'50%'}">
								</u-icon>
								<text>未完成</text>
							</view>
							<view :class="['status-list coreshop-flex coreshop-justify-center', planStatusCur=='0'?'active':'']" @click="selectStatus('0')">
								<u-icon
									name="minus"  
									color="#fff" 
									size="20" 
									:custom-style="{width:'39rpx',height:'39rpx',marginRight:'7rpx',background:'#a2a6ac',borderRadius:'50%'}">
								</u-icon>
								取消
							</view>
						</view>
						<view class="text-area">
							<u--textarea
								border="none"
								v-model="QKSM"   
								 maxlength="-1" 
								 :fixed="true"
								 placeholder="请填写情况说明"
								 placeholderStyle="color:#A2A6AC;fontSize:26rpx"
								height="180rpx">
							</u--textarea>
						</view>
						<view v-if="planStatusCur=='1'" :class="['select-list', XCBFSJ ?'active':'']" @click="selectShowTime('1')">{{XCBFSJ || '点击选中下次拜访时间'}}</view>
						<view 
							v-if="planStatusCur=='2'"
							:class="['select-list', CompletionTime ?'active':'']" 
							@click="selectShowTime('2')">
							{{CompletionTime || '点击选择完成时间'}}
						</view>
						<view class="coreshop-flex c-m-t-10 sales-box">
							<input class="coreshop-flex-sub sales-input"
								:value="actualSales"
								maxlength="-1"
								type="number"
								:clearable="false"
								placeholder="实际完成数量"
								placeholder-style="fontSize:24rpx;color:#A2A6AC"
								:data-idx="index"
								@input="salesInput"/>
						</view>
					</view>
					<view class="pop-btns coreshop-flex">
						<view class="coreshop-flex-sub" @click="cancelExplain">关闭</view>
						<view class="coreshop-flex-sub confirm-btn" @click="explainPopConfirm">确认提交</view>
					</view>
				</view>
			</movable-view>
		</movable-area>
		
		<u-datetime-picker 
		 ref="datetimePicker"
		 :show="selectTimeIsShow"
		 v-model="defaultTime" 
		 mode="datetime" 
		 @cancel="dtCancel"
		 @confirm="selectTimeConfirm"
		></u-datetime-picker>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				selectTimeIsShow:false,
				selectTimeShow:'',
				defaultTime:Number(new Date()),//默认时间
				
				planStatusCur:'',
				XCBFSJ:'',
				CompletionTime:'',
				QKSM:'',
			}
		},
		props:{
			userData:{
				type:Object,
				default:{}
			},
			editExplainInfo:{
				type:Object,
				default:{}
			},
		},
		created() {
			console.log(this.editExplainInfo)
			if(this.editExplainInfo.jh.ywyid != this.userData.ID){
				this.planStatusCur = '2';
			}
			this.QKSM='1';
			let timeId=setTimeout(()=>{
				this.QKSM='';
				clearTimeout(timeId);
			},50);
		},
		onReady() { 
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods:{
			formatter(type, value) { 
			     if (type === 'year') {
			         return `${value}年`
			     }
			     if (type === 'month') {
			         return `${value}月`
			     }
			     if (type === 'day') {
			         return `${value}日`
			     }
				 if (type === 'hour') {
				     return `${value}时`
				 }
				 if (type === 'minute') {
				     return `${value}分`
				 } 
			     return value
			 },
			selectStatus(e){ //选择情况状态
				this.planStatusCur = e;
			},
			selectShowTime(e){//选择完成时间/下次拜访时间
				this.selectTimeShow = e=='1' ? 'next' : 'finish';
				this.selectTimeIsShow=true;
			}, 
			dtCancel(){
				this.selectTimeIsShow = false;
			},
			selectTimeConfirm(e){
				const data =this.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM'); 
				if(this.selectTimeShow=='next'){
					this.XCBFSJ = data;
				}else{
					this.CompletionTime = data;
				}
				this.dtCancel();
			},
			salesInput(e){
				const str = e.detail.value.replace(/[^\d]/g,'');
				const strN = str ? str*1 : str;
				this.actualSales = strN;
				return strN;
			},
			cancelExplain(){
				this.$emit('cancelExplain')
			},
			explainPopConfirm(){//提交完成情况说明
				const planData = this.editExplainInfo || {};
				let params = {
					JHID : planData.jh.ID,
					JHFLID : planData.jhfl.ID,
					JHXQItemID: planData.detail.ID,
					QKSM : this.QKSM,
					JHZT : this.planStatusCur,
					XCBFSJ : this.XCBFSJ,
					CompletionTime : this.CompletionTime,
				};
				
				if(this.actualSales){
					params.SJWCJE = this.actualSales;
					params.QKSM = params.QKSM + `[实际完成数量：${this.actualSales}]`;
				}
				const tL = {0:'取消',1:'未完成',2:'已完成'};
				params.QKSM = params.QKSM + `[${tL[params.JHZT]}]`;
				
				
				if(this.planStatusCur != '2'){
					delete params.CompletionTime;
				}
			
				if(!params.JHZT){
					return uni.showToast({
						title:'请选择计划状态！',
						icon:'none'
					})
				}
				
				if(params.JHZT !='2' && !params.QKSM){ //未完成，取消 说明必填
					return uni.showToast({
						title:'请填写情况说明！',
						icon:'none'
						
					})
				}
				if((this.userData.SSZWBH == '21' || this.userData.SSZWBH=='111') && params.JHZT =='1' && !params.XCBFSJ){
					return uni.showToast({
						title:'请选择下次拜访时间！',
						icon:'none'
					})
				}
				
				if((this.userData.SSZWBH == '21' || this.userData.SSZWBH=='111') && params.JHZT =='2' && !params.CompletionTime){
					return uni.showToast({
						title:'请选择完成时间！',
						icon:'none'
					})
				}
				
				
				let field={}; //匹配PC端传递的参数 
				field.ID = planData.jh.ID;
				field.JHLX=planData.jh.jhlx;
				//明细
				field.planDetailItems = []; 
				
				let detailItems = {
				     ID: planData.detail.id,
				     QKSM: this.QKSM,
				     JHZT: this.planStatusCur,
				     XCBFSJ: this.XCBFSJ,
				     CompletionTime: this.CompletionTime,
				     ActualAmount:this.actualSales 
				 }
				 field.planDetailItems.push(detailItems);	
					
				console.log(field)
				this.$u.api.editJHWCJS(field).then(res=>{
					this.showExplainPop = false;
					if (!res.status) {
						this.$u.toast(res.msg) 
					}else{
						uni.showToast({
							title:'操作成功！'
						})
						setTimeout(()=>{
							this.$emit('explainSure', this.editExplainInfo.t)
						},1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// pop弹框
	movable-area{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.4);
	}
	.pop-box{
		width: auto;
		height: auto;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.pop-body{
		overflow: hidden;
	}
	.pop-title{
		font-size: 32rpx;
		color: #333;
		line-height: 80rpx;
		text-align: center;
		padding-top: 10rpx;
	}
	.pop-content{
		padding: 20rpx 30rpx;
		.status-list{
			width: 178rpx;
			height: 70rpx;
			background: #F1F1F5;
			border-radius: 20rpx;
			text-align: center;
			font-size: 26rpx;
			color: #A2A6AC;
			line-height: 70rpx;
			margin: 0 5rpx 20rpx;
			&.active{
				background-color: #2A8FFC;
				color: #fff;
			}
		}
		.text-area{
			width: 556rpx;
			background-color: #F1F1F5;
			border-radius: 20rpx;
			padding: 15rpx;
			overflow: hidden;
			margin: 0 5rpx 20rpx;
		}
		.select-list{
			line-height: 80rpx;
			font-size: 26rpx;
			color: #A2A6AC;
			border-radius: 20rpx;
			margin: 20rpx 5rpx;
			background-color: #F1F1F5;
			padding-left: 18rpx;
			&.active{
				color: #333;
			}
		}
	}
	.pop-btns{
		height: 80rpx;
		border-top: 1px solid rgba($color: #e5e5e5, $alpha: 0.6);
		line-height: 80rpx;
		font-size: 32rpx;
		color: #666;
		text-align: center;
		box-sizing: border-box;
		.confirm-btn{
			color: #ffffff;
			background-color: #2A8FFC;
		}
	}
	
	.sales-box{
		background: #F1F1F5;
		border-radius: 20rpx;
		margin: 0 5rpx;
		padding: 0 20rpx;
		height: 80rpx;
		color: $core-type-primary-dark;
		.sales-input{
			width: 300rpx;
			padding: 10rpx;
			color: #303133;
		}
	}
	
	.time-status{
		font-size: 24rpx;
		color: #fff;
		background: #ff5722;
		padding: 0 8rpx;
		line-height: 40rpx;
	}
	.over{
		background: red;
	}
	
	.over-btn{
		color: red;
		border: 1px solid red;
		line-height: 40rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		padding: 0 20rpx;
	}
</style>
